
<template>
<!-- 业委会信息 -->
    <div class="owners-message">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/sys/ownersMessage?navIndex=2' }">业委会</el-breadcrumb-item>
          <el-breadcrumb-item>业委会信息</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row class="el-margin-v-30 el-padding-l-25 el-padding-r-40">
          <el-row class="el-padding-20 el-white-bgcolor">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
              <el-form-item label="业委会名称" prop="name">
                <el-col :span="12" v-if="ruleForm.state===1&&isText">
                  {{ruleForm.name}}
                </el-col>
                <el-col :span="6" v-else>
                  <el-input v-model="ruleForm.name" placeholder="万科城市花园第三届业主委员会"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="委员人数" prop="ownerNum">
                <el-col :span="12" v-if="ruleForm.state===1&&isText">
                  {{ruleForm.ownerNum}}人
                </el-col>
                <el-col :span="3" v-else>
                  <el-input v-model="ruleForm.ownerNum">
                    <template slot="append">人</template>
                  </el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="成立日期">
                <el-col :span="12" v-if="ruleForm.state===1&&isText">
                  {{ruleForm.startDate}}
                </el-col>
                <el-col :span="12" v-else>
                  <el-form-item prop="startDate">
                    <el-date-picker type="date" placeholder="选择成立日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" v-model="ruleForm.startDate" style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item label="到期日期">
                <el-col :span="12" v-if="ruleForm.state===1&&isText">
                  {{ruleForm.endDate}}
                </el-col>
                <el-col :span="12" v-else>
                  <el-form-item prop="endDate">
                    <el-date-picker type="date" placeholder="选择到期日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" v-model="ruleForm.endDate" style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item label="详情介绍" prop="desc">
                <el-col :span="12" v-if="ruleForm.state===1&&isText">
                  {{ruleForm.desc}}
                </el-col>
                <el-col :span="12" v-else>
                  <el-input type="textarea" :rows="10" v-model="ruleForm.desc"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="update()" v-if="ruleForm.state===1">{{isText?"修改":"保存"}}</el-button>
                <el-button type="primary" size="small" @click="create('ruleForm','add')" v-else>创建</el-button>
                <el-button size="small" @click="rePrev()" v-if="ruleForm.state===1&&!isText">返回</el-button>
              </el-form-item>
              <el-form-item>
                <el-col :span="12" v-if="ruleForm.state==0">
                  <el-alert
                    title="还没有创建业委会"
                    type="warning"
                    :closable="false">
                  </el-alert>
                </el-col>
                <el-col :span="12" v-if="ruleForm.state==2">
                  <el-alert
                    title="当前业委会已过期,请创建新的业委会"
                    type="warning"
                    :closable="false">
                  </el-alert>
                </el-col>
              </el-form-item>
            </el-form>
          </el-row>
        </el-row>
    </div>
</template>

<script>
import { bus } from "../../tools/bus";
import { setItem, getItem } from "../../tools/common";
export default {
    data(){
        return{
          isText:true,
          ruleForm: {
            name: '',
            ownerNum: '',
            startDate: '',
            endDate: '',
            desc: '',
            state:0
          },
          rules: {
            name: [
              { required: false, message: '请输入活动名称', trigger: 'blur' }
            ],
            ownerNum: [
              { required: true, message: '请输入委员会人数', trigger: 'blur' }
            ],
            startDate: [
              { required: false, message: '请选择成立日期', trigger: 'change' }
            ],
            endDate: [
              { required: false, message: '请选择到期日期', trigger: 'change' }
            ],
            desc: [
              { required: false, message: '请填写活动形式', trigger: 'blur' }
            ]
          }
        }
    },

    mounted(){
      this.getMessage()
    },
    methods: {
      getMessage(){
        let url = "/committee/get";
        let info = getItem("info")?getItem("info"):{};
        let p = {
          communityId: info.communityId
        };
        
        this.$http
          .fetch(url, p)
          .then(res => {
            console.log(`res`, res);
            this.ruleForm = {
              committeeId:res.data.committeeId?res.data.committeeId:"",
              communityId: info.communityId,
              name: res.data.name?res.data.name:"",
              ownerNum: res.data.num?res.data.num:"",
              startDate: res.data.startDay?res.data.startDay:"",
              endDate: res.data.endDay?res.data.endDay:"",
              desc: res.data.content?res.data.content:"",
              state:res.data.state?res.data.state:0
            };
            this.isText = true;
        
          })
          .catch(err => {});
      },
      create(formName,type) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let self=this;
            let url = "/committee/"+type;
            let info = getItem("info")?getItem("info"):{};
            let p = {
              committeeId:self.ruleForm.committeeId,
              communityId: info.communityId,
              name: self.ruleForm.name,
              num: self.ruleForm.ownerNum,
              startDay: self.ruleForm.startDate,
              endDay: self.ruleForm.endDate,
              content: self.ruleForm.desc,
            };
            self.$http
              .fetch(url, p)
              .then(res => {
                console.log(`res`, res);
                this.getMessage();
              })
              .catch(err => {});
          } else {
            return false;
          }
        });
      },
      update(){
        if(this.isText){
          this.isText = false;
          return false;
        }
        this.create('ruleForm','modify');
      },
      rePrev() {
        this.isText = true;
      }
    }
}
</script>

<style scoped>

</style>
